import React, { FC } from "react"
import { Typography, Space, Form, Input, Button, message } from "antd"
import { UserAddOutlined } from "@ant-design/icons"
import styles from "./Register.module.scss"
import { LOGIN_PATHNAME } from "../router"
import { Link, useNavigate } from "react-router-dom"
import { useRequest, useTitle } from "ahooks"
import { registerService } from "../services/user"

const { Title } = Typography

const Register: FC = () => {
    useTitle("问卷星途 - 注册")

    const nav = useNavigate()

    const { run: handleRegister } = useRequest(
        async values => {
            const { username, password, nickname } = values
            await registerService(username, password, nickname)
        },
        {
            manual: true,
            onSuccess() {
                message.success("注册成功")
                // 跳转到登录页
                nav(LOGIN_PATHNAME)
            }
        }
    )

    // values 是通过 onFinish 回调函数从 Form 组件中传递过来的
    const onFinish = (values: any) => {
        // 调用ajax请求
        handleRegister(values)
    }

    return (
        <div className={styles.container}>
            <div>
                <Space>
                    <Title level={2}>
                        <UserAddOutlined />
                    </Title>
                    <Title level={2}>注册新用户</Title>
                </Space>
            </div>
            <div>
                <Form labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} style={{ width: 400 }} onFinish={onFinish}>
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[
                            { required: true, message: "请输入用户名" },
                            {
                                type: "string",
                                min: 5,
                                max: 20,
                                message: "字符长度在 5-20 之间"
                            },
                            // 正则表达式
                            {
                                pattern: /^\w+$/,
                                message: "只能是字母数字下划线"
                            }
                        ]}
                    >
                        <Input autoComplete="username" />
                    </Form.Item>
                    <Form.Item label="密码" name="password" rules={[{ required: true, message: "请输入密码" }]}>
                        <Input.Password autoComplete="current-password" />
                    </Form.Item>
                    <Form.Item
                        label="确认密码"
                        name="confirm"
                        dependencies={["password"]} // 依赖password，password变化，就会重新触发validator验证
                        rules={[
                            {
                                required: true,
                                message: "请输入密码"
                            },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    // 如果没有输入或者输入的和密码一样就验证通过
                                    if (!value || getFieldValue("password") === value) {
                                        return Promise.resolve()
                                    } else {
                                        return Promise.reject(new Error("两次密码不一致"))
                                    }
                                }
                            })
                        ]}
                    >
                        <Input.Password autoComplete="new-password" />
                    </Form.Item>
                    <Form.Item label="昵称" name="nickname">
                        <Input autoComplete="nickname" />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                注册
                            </Button>
                            <Link to={LOGIN_PATHNAME}>已有账户，登录</Link>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default Register
